<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
    function caulate(mark){
    var First=0;
    First=Number(document.getElementById("first").value);
    var Second=0;
    Second=Number(document.getElementById("second").value);
    var Result=0;
    switch(mark){
        case '+':Result=First+Second+0;
        break;
        case '-':Result=First-Second;
        break;
        case '×':Result=First*Second;
        break;
        case '÷':Result=First/Second;
        break;
    }
    document.getElementById("result").value=Result;
    }
    </script>
    <style>
        li{
            list-style-type: none;
            margin: 5px;
        }
        .box{
            width: 300px;
            height: 160px;
            background-color:rgb(201, 228, 149);
            margin: 0 auto;
        }
        .headt{
            text-align: center;
            font-family: "华文楷体";
            font-size: 20px;
            font-weight: 800;
        }
        .fh input{
           text-align: center;
           margin: 0 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="headt">
                购物简易计算器
        </div>
        <ul>
            <li>
                <span>第一个数</span>
                <input type="text" id="first">
            </li>
            <li>
                第二个数
                <input type="text" id="second">
            </li>
            <li class="fh">
                <input type="button" name="" id="btn" value="+" onclick="caulate('+')">
                <input type="button" name="" id="btn" value="-" onclick="caulate('-')">
                <input type="button" name="" id="btn" value="×" onclick="caulate('×')">
                <input type="button" name="" id="btn" value="÷" onclick="caulate('÷')">
            </li>
            <li>
                <span>
                    计算结果
                </span>
                <input type="text" id="result">
            </li>
        </ul>
    </div>
</body>
</html>